import React, { Component } from 'react'
import IceContainer from '@icedesign/container';
import DataBinder from '@icedesign/data-binder';
import { Loading } from '@icedesign/base';
import { generateTreeChartOption } from '../../../../echarts-figures.js'
// import PropTypes from 'prop-types'

var echarts = require('echarts');

// @DataBinder({
//   ChartData: {
//     url: `${global.constants.GOLDEYEGETHOST}cattle/similar_company?`,
//     type: 'get',
//     params: {
//       // stockCode: ''
//     },
//     defaultBindingData: {
//       numbers: [],
//       lay: 0
//     }
//   }
// })
export default class Similar extends Component {

  // static propTypes = {
  // };
  
  constructor(props) {
    super(props);
    this.state = {
        chartId : 'SimilarCompany',
        text: '请点击会计科目查看相似公司。<br><br>完整的科目维度包含：<br>利润表科目（2个）：净利润，营业收入；<br>现金流量表科目（3个）：销售商品、提供劳务收到的现金，购买商品、接受劳务支付的现金，投资支付的现金；<br> 资产负债表科目（10个）：应收账款，应付账款，存货，货币资金，应付票据，应付票据，预付账款，预收账款，固定资产，商誉；<br><br>若缺少某一科目维度，表示该公司在该科目维度上没有相似公司，或者没有财报数据。'
    }
  }
  // initChart(config) {
  //   let myChart = echarts.getInstanceByDom(document.getElementById(this.state.chartId));
  //   if( myChart === undefined){
  //       myChart = echarts.init(document.getElementById(this.state.chartId));
  //   }
  //   myChart.setOption(config);
  //   window.onresize =()=>{
  //     myChart.resize();
  //   }
  // }

  // componentDidMount() {
  //   this.props.updateBindingData('ChartData',{
  //     'params': {
  //       secu_code: GetUrlParam("secu_code"),
  //       type:'dynamic',
  //       tab:''
  //     }
  //   }, (data) => {
  //     this.setState({
  //       status: data.status
  //     })
  //     if(data.status !== 'NOT_PRIVILEGED'){
  //     this.initChart(generateTreeChartOption(    
  //       '动态相似公司',
  //       data.data.values,
  //     ));
  //     }
  //   });
  // }
  render() {
    //const { ChartData } = this.props.bindingData;
    const {chartId, isLoading} = this.props;
    const chart = (
      <div id={chartId} style={{width: "1200px", height: "800px"}}></div>
    );

    return (
      <div>
        <IceContainer>
          <Loading 
            style={{width: "100%"}}
            visible={isLoading ? true : false}
            shape="fusion-reactor"
          >
          <div id={chartId} style={{width: "1200px", height: "800px"}}></div>
          {/* <PermissionControl status={this.state.status} chart={chart} /> */}
          <div style={{fontSize:'18px',fontWeight:'bold',marginBottom:'10px'}}>指标解释</div>
          <div dangerouslySetInnerHTML={{ __html: this.state.text }} className="tab-text" />
          </Loading>
        </IceContainer>
      </div>
    )
  }
}
